<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/1/5 0005
  Time: 14:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>金币统计</title>
    <jsp:include page="/commons/common-js.jsp"></jsp:include>
</head>
<body>
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">总金币</li>
        <li>日差额</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <table class="layui-hide" id="goldtolaltable" lay-filter="goldtolaltable"></table>
        </div>
        <div class="layui-tab-item">
            <table class="layui-hide" id="dailygoldtable" lay-filter="dailygoldtable"></table>
        </div>
    </div>
</div>

<script type="text/html" id="goldtolaltoolbar">
    <button class="layui-btn layui-btn-ms"  lay-event="F5">刷新</button>
</script>
<script type="text/html" id="dailygoldtoolbar">
    <form class="layui-form layui-form-pane" lay-filter="dailygoldform" >
        <div class="layui-inline">
            <label class="layui-form-label" style="width: auto">年月选择</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="value" id="dailygolddate" autocomplete="off" placeholder="yyyyMM">
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-ms" lay-submit=""  lay-event="dailygoldF5">搜索</button>
        </div>
    </form>
</script>

<script>
    layui.use(['table', 'form', 'laytpl','element','laydate'], function () {
        var table = layui.table,
            form = layui.form,
            laydate = layui.laydate

        //日期选择
        laydate.render({
            elem: '#dailygolddate'
            ,type: 'month'
            ,format: 'yyyyMM'
        });

        var tableins = table.render({
            elem: '#goldtolaltable'
            , url: '/profile/goldtotal'
            , defaultToolbar: []
            ,toolbar:'#goldtolaltoolbar'
            , cols: [[
                {field: 'userTypeName', width: 200, title: '用户类型'}
                , {field: 'gold', width: 200, title: '总金币'}
            ]]
        });

        var dailygoldtableins = table.render({
            elem: '#dailygoldtable'
            , url: '/goldtotal/daily'
            , defaultToolbar: []
            ,toolbar:'#dailygoldtoolbar'
            , cols: [[
                {field: 'id', width: 100, title: '日期'}
                ,{field: 'allGold', width: 100, title: '金币总和'}
                , {field: 'change', width: 100, title: '差额'}
                , {field: 'upGold', width: 100, title: '调动'}
                , {field: 'changeUpGold', width: 100, title: '差额-调动'}
            ]]
        });



        //头工具栏事件
        table.on('toolbar(goldtolaltable)', function(obj){
            if (obj.event === 'F5'){
                tableins.reload()
            }
        });

        //监听提交
        form.on('submit(dailygoldform)', function(data){
            console.debug(data.field.value)
            dailygoldtableins.reload({
                where:{
                    'value':data.field.value
                }
            })
            //重新渲染
            laydate.render({
                elem: '#dailygolddate'
                ,type: 'month'
                ,format: 'yyyyMM'
            });
            return false;
        });

    });
</script>

</body>
</html>
